<template>
    <div class="slide">
            <div class="slide-top">
                <div class="slide-top-left">
                    <h5>京东秒杀</h5>
                    <span class="session">{{round}}</span>
                    <img src="https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png" alt="">
                    <div class="timer">
                        <span class="hours">{{h}}</span>:
                        <span class="minute">{{m}}</span>:
                        <span class="second">{{s}}</span>
                    </div>
                </div>
                <div class="slide-top-right">
                    爆款轮番秒&nbsp;
                    <img src="https://wq.360buyimg.com/jdm-home-page/pages/images/arrow_rt_2ccb8cd5.png" alt="">
                </div>
            </div>
            <div class="slide-bottom">
                <a v-for="(v,index) in  slideArr" :key="index">
                    <img :src="v.src" alt="">
                    <p>¥
                        <span>{{v.price}}</span>
                    </p>
                </a>
            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            slideArr:[
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/78507/16/20538/399353/62d4c4d2E1d2a5f7d/8198eb6f39e0059d.jpg',
                    price:9.9
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/154548/37/33142/144695/63956a64E5260030f/8b55f8fedbfba750.jpg',
                    price:39.8
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/113093/39/28845/59981/63be4ab2Ff821be47/fecca09093fc7b75.jpg',
                    price:879
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/210931/40/24031/77516/62c11d9fE5da15fe1/e46720f1a14e695e.jpg',
                    price:9.9
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/191982/26/30974/68306/63b05086F0d3fdea3/2e80bcc241c55434.jpg',
                    price:5699
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/66847/23/24895/122278/63bf7870F421443a9/e381035e16299064.jpg',
                    price:198
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/47276/26/22511/92416/63b8445eF67dd7d88/46308fb79df2580a.jpg',
                    price:39.8
                },
                {
                    src:'//m.360buyimg.com/seckillcms/jfs/t1/158406/38/28928/226792/62e108fdE9c737b6a/90bcffd3d1e2318e.png',
                    price:388
                },

            ],
            //秒杀秒数，用来监听
            timerS:'',
            round:0,
             h:0,
             m:0,
             s:0,
        }
    },
    methods:{
        countdown(){
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth()+1
            let day = date.getDate()
            let hours = date.getHours()
            //用来接收两小时后的秒数
            let newTime
             //当前秒数
            let time = new Date().getTime()
            //秒数差值
            let sub
                  //判断当前时间是否能被2整除，如果可以，就取这个数作为场次时间
                if(hours%2 == 0 ){
                    //偶数小时
                    this.round = hours;  //场次小时
                    newTime  = new Date(`${year}-${month}-${day} ${hours}:00:00`).getTime()+2*1000*60*60  
                }else{ 
                    //奇数小时
                    this.round = Number(hours)-1;  //场次小时
                    newTime  = new Date(`${year}-${month}-${day} ${hours}:00:00`).getTime()+1*1000*60*60
                }

                
                //相差秒数
                sub = (newTime-time)/1000
                //小时
                this.h =  parseInt((sub % ( 60 * 60 * 24)) / (60 *60));
                //分钟
                this.m =  parseInt((sub % (60 * 60)) /  60);
                //秒
                this.s =parseInt( (sub % 60));
                this.round = this.round/1<10 ? '0'+this.round : this.round;
                this.h = this.h/1<10 ? '0'+this.h : this.h;
                this.m = this.m/1<10 ? '0'+this.m : this.m;
                this.s = this.s/1<10 ? '0'+this.s : this.s;

        }
    },
    watch:{
        //秒数监听
        s:{
            handler(){
                clearTimeout(this.timerS)
                this.timerS = setTimeout(this.countdown,1000)
            },
            immediate:true
        }
    }
}
</script>

<style scoped>
    .slide {
        height: 35.46666667vw;
        padding: 2vw 1.33333333vw;
        box-sizing: border-box;
        margin: 3.73333333vw 2.66666667vw;
        border-radius: 10px;
        color: #ed3933;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        }
        .slide .slide-top {
        height: 8vw;
        background: url();
        background-size: contain;
        display: flex;
        justify-content: space-between;
        }
        .slide .slide-top .slide-top-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 2.4vw;
        }
        .slide .slide-top .slide-top-left h5 {
        color: black ;
        font-size: 3.6vw;
        }
        .slide .slide-top .slide-top-left .session {
        display: inline-block;
        margin-left: 2.4vw;
        }
        .slide .slide-top .slide-top-left img {
        height: 5.33333333vw;
        width: 5.33333333vw;
        }
        .slide .slide-top .slide-top-left .timer {
        margin-left: 4.53333333vw;
        font-size: 2.4vw;
        }
        .slide .slide-top .slide-top-left .timer span {
        display: inline-block;
        background: #ed3933;
        border-radius: 4px;
        color: #fff;
        }
        .slide .slide-top .slide-top-right {
        font-size: 2.93333333vw;
        display: flex;
        align-items: center;
        }
        .slide .slide-top .slide-top-right img {
        width: 3.2vw;
        height: 3.2vw;
        }
        .slide .slide-bottom {
        height: 28vw;
        width: 91.2vw;
        padding-top: 4vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        overflow: scroll;
        }
        .slide .slide-bottom a {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-right: 0.53333333vw;
        font-size: 2.66666667vw;
        font-weight: bold;
        }
        .slide .slide-bottom a img {
        height: 14.66666667vw;
        width: 14.66666667vw;
        }

</style>